<script setup lang="ts">
import { docheckphoneFn } from '@/api/user';
import { ref, computed } from 'vue';
import type { Ref, ComputedRef } from 'vue';
import { showConfirmDialog } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter()



const tel: Ref<string, string> = ref('')
const isClick: ComputedRef<boolean> = computed(() => {
    return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(tel.value)
})
// $router.push('/register/step2')
function step2Click() {
    docheckphoneFn({
        tel: tel.value
    }).then(res => {
        // console.log(res.data.code);
        if (res.data.code == '10005') {
            // 账号已经存在
            showConfirmDialog({
                title: '温馨提示',
                message: '该手机号已经存在，是否直接登录？',
            })
                .then(() => {
                    // on confirm
                    router.replace('/login')
                })
                .catch(() => {
                    // on cancel
                });
        } else if (res.data.code == '200') {
            // 可以注册
            // 将手机号保存，下一页面要发送数据请求
            sessionStorage.setItem('tel', tel.value)

            router.push('/register/step2')
        } else {
            // 有错误
        }
    })
}


</script>
<template>
    <van-form>
        <van-cell-group inset>
            <van-field v-model="tel" name="手机号" label="手机号" placeholder="手机号"
                :rules="[{ pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请正确填写手机号' }]" />

        </van-cell-group>
        <div style="padding: 0 20px;">
            <van-button @click="step2Click" :disabled="!isClick" style="margin: 26px 0 26px 0;" color="#f66" round block
                native-type="submit">
                下 一 步
            </van-button>

        </div>
    </van-form>
</template>